<?xml version="1.0" encoding= "UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions">

<ui:composition template="/templates/common.xhtml">
	<ui:define name="content">
		<f:metadata>
			<f:viewParam name="id" value="#{forumBean.forumId}"></f:viewParam>
		</f:metadata>

		<p:panel header="Forum: #{forumBean.currentForum.forumTitle}">

			<p:panelGrid columns="2" style="width:95%;margin-left:10px">

				<h:outputText value="Description: "
					rendered="#{not empty forumBean.currentForum.forumDescription}" />
				<h:outputText value=" #{forumBean.currentForum.forumDescription}"
					rendered="#{not empty forumBean.currentForum.forumDescription}" />

				<h:outputText value="Creation date: "
					converter="javax.faces.DateTime"
					rendered="#{not empty forumBean.currentForum.forumCreationDate}" />
				<h:outputText value="#{forumBean.currentForum.forumCreationDate}"
					rendered="#{not empty forumBean.currentForum.forumCreationDate}" />
				<h:outputText value="Administrator: "
					rendered="#{not empty forumBean.currentForum.administrator}" />
				<h:link
					value="#{forumBean.currentForum.administrator.firstName} #{forumBean.currentForum.administrator.lastName}"
					rendered="#{not empty forumBean.currentForum.administrator}"
					outcome="/user/main">
					<f:param name="id"
						value="#{forumBean.currentForum.administrator.userId}" />

				</h:link>

			</p:panelGrid>

			<pre></pre>
			<p:commandButton id="forumadd" value="Become partcipant"
				rendered="#{!forumBean.isParticipant() and not empty userBean.self}"
				style="margin-left: 20px" actionListener="#{forumBean.addMember}"
				update="members" />

			<pre></pre>

			<p:carousel id="members" value="#{forumBean.forumParticipants}"
				headerText="Members" var="member" itemStyle="text-align:center"
				responsive="true" style="width:95%;margin-left:15px">

				<p:panelGrid columns="2" style="width:90%;margin:10px 0px"
					columnClasses="label,value" layout="grid"
					styleClass="ui-panelgrid-blank">


					<h:outputText value="Name:" />

					<h:link value="#{member.firstName} #{member.lastName}"
						outcome="/user/main">
						<f:param name="id" value="#{member.userId}" />

					</h:link>
					<h:outputText value="Gender" />
					<h:outputText value="#{member.gender}" />

				</p:panelGrid>

				<f:facet name="footer">
                In total there are #{fn:length(forumBean.currentForum.members)} members.
        </f:facet>
			</p:carousel>
			<pre></pre>
			<h:form>

				<p:panel id="newNotePanel" header="New note" style="width:95%">


					<p:inputTextarea rows="3" cols="90" maxlength="200"
						value="#{noteBean.noteText}" />


					<p:commandButton value="Post" action="#{noteBean.postNote}"
						update="newNotePanel,noteList" style="margin-top: 10px" />



				</p:panel>



				<pre></pre>
				<p:tabView rendered="#{not empty forumBean.currentForum}"
					style="width:95%;margin:10px 0px" id="noteList">
					<p:tab title="All notes">
						<h:panelGrid columns="2" cellpadding="10">
							<p:dataTable var="note" value="#{forumBean.forumNotes}">
								<p:column headerText="Time">
									<h:outputText value="#{note.noteTime}" />
								</p:column>
								<p:column headerText="Text">
									<h:outputText value="#{note.noteText}" />
								</p:column>
								<p:column headerText="Sender">
									<h:outputText
										value="#{note.noteSender.firstName} #{note.noteSender.lastName}" />
								</p:column>

							</p:dataTable>
						</h:panelGrid>
					</p:tab>

				</p:tabView>

			</h:form>
			<pre></pre>
			<p:commandButton value="Back" action="/forum/list"
				style="margin-left:20px" />
		</p:panel>

	</ui:define>

</ui:composition>


</html>
